<template>
  <!--冒号的作用：类似于v-bind属性绑定-->
  <a-list
    item-layout="horizontal"
    :data-source="props.imageList"
    :grid="{ gutter: 35, column: 5 }"
  >
    <template #renderItem="{ item }">
      <a-card class="image-card" hoverable style="width: 240px" size="small">
        <template #cover>
          <img class="image-avatar" alt="" :src="item.murl" />
        </template>
        <a-card-meta :title="item.title">
          <template #description>{{ item.title }}</template>
        </a-card-meta>
      </a-card>
    </template>
  </a-list>
</template>

<script setup lang="ts">
import { withDefaults, defineProps } from "vue";

//定义类型，ts语法
interface Props {
  imageList: never[];
}

//接收来自父组件【IndexPage.vue中由<imageList :imageList = imageList>传入的imageList数据】
const props = withDefaults(defineProps<Props>(), {
  imageList: () => [],
});
</script>

<style scoped>
.image-card {
  height: 300px; /* 统一卡片高度 */
}

.image-avatar {
  height: 220px; /* 统一头像高度 */
}
</style>
